/**
 * scroll.ts 
 */ 
import { DirectiveBinding } from 'vue';
// 我们会在DOM上拓展一些属性用于滚动动画的执行，这里拓展一下类型，方便编码
interface AnimationElement extends HTMLElement {
    speed: number;
}
const DEFAULT_SPEED = 1;
const RAF = window.requestAnimationFrame;
// const CancelRAF = window.cancelAnimationFrame;
const elementScroll = (el: AnimationElement) => {
    const maxScrollTop = el.scrollHeight - el.clientHeight;
    // 根据当前滚动高度与滚动速度，计算出新的滚动高度
    const scrollTop =
        el.scrollTop + el.speed >= maxScrollTop // 超过最大滚动高度重置 --〉 从头再来
            ? 0
            : el.scrollTop + el.speed;
    // 执行滚动
    el.scrollTo({
        top: scrollTop
    });
    // 继续执行下一帧动画
    RAF(elementScroll.bind(null, el));
}
export default {
    name: 'scroll',
    mounted: (el: AnimationElement, binding: DirectiveBinding) => {
        const maxScrollTop = el.scrollHeight - el.clientHeight;
        // 没有滚动空间的时候，无需滚动，直接返回。
        if (maxScrollTop <= 0) {
            return;
        }
        // 将速度变量存到DOM中，方便后续动画函数取用
        el.speed = binding.value || DEFAULT_SPEED;
        // 使用RAF调用动画函数
        RAF(elementScroll.bind(null, el));
    },
    // unmounted: (el: HTMLElement, binding: DirectiveBinding) => {}
}